<template>
<div class="shopcar-container">
  <!-- 商品列表项区域 -->
  <div class="goods-list">
    <div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                     @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"></mt-switch>
          <img :src="rootPath+item.thumb_path">
          <div class="info">
            <h1>{{ item.title }}</h1>
            <p>
              <span class="price">￥{{ item.sell_price*$store.getters.getGoodsCount[item.id]}}</span>
              <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
              <a href="#" @click.prevent="remove(item.id, i)">删除</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 结算区域 -->
  <div class="mui-card">
    <div class="mui-card-content">
      <div class="mui-card-content-inner jiesuan">
        <div class="left">
          <p>总计1000</p>
          <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span> 件，总价<span class="red">￥{{$store.getters.getGoodsCountAndAmount.amount}}</span></p>
        </div>
        <mt-button type="danger">去结算</mt-button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import numbox from "../comment/shopcar_box.vue";
  import Vue from 'vue';
  export default {
    data() {
      return {
        goodslist: [],// 购物车中所有商品的数据
        rootPath:Vue.http.options.root
      };
    },
    created() {
      this.getGoodsList();
    },
    methods :{
      getGoodsList() {
        // 1. 获取到 store 中所有的商品的Id，然后拼接出一个 用逗号分隔的 字符串
        var idArr = [];
        this.$store.state.car.forEach(item => idArr.push(item.id));
        // 如果 购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
        if (idArr.length <= 0) {
          return;
        }
        // 获取购物车商品列表
        this.$http.get("api/goods/getshopcarlist/" + idArr.join(",")).then(result => {
          if (result.body.status === 0) {
            this.goodslist = result.body.message;
          }
        });
      },
      remove(id, index) {
        // 点击删除，把商品从 store 中根据 传递的 Id 删除，同时，把 当前组件中的 goodslist 中，对应要删除的那个商品，使用 index 来删除
        this.goodslist.splice(index, 1);
        this.$store.commit("removeFormCar", id);
      },
      selectedChanged(id,value){
        //console.log(this.$store.getters.getGoodsSelected)
        this.$store.commit("updateGoodsSelected",{id:id,selected: value });
      }
    },
    components: {
      numbox
    }
  };
</script>

<style lang="scss" scoped>
  .shopcar-container {
      background-color: #eee;
      overflow: hidden;
      .goods-list {
        .mui-card-content-inner {
          display: flex;
          align-items: center;
        }
        img {
          width: 60px;
        }
        h1 {
          font-size: 13px;
        }
        .info {
          .price {
            color: red;
            font-weight: bold;
          }
        }
      }
      .jiesuan {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .red {
          color: red;
          font-weight: bold;
          font-size: 16px;
        }
      }
  }
</style>
